<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>萬人體驗團投票 - iTRiAL</title>
		<meta name="keywords" content="產品試用, 產品體驗, 免費產品, 女性產品試用, 護膚產品, 美妝產品, 髮型產品, 個人護理產品, 台灣美妝產品" />
		<meta name="description" content="投選你最想使用的護膚產品，美妝產品，髮型產品，個人護理產品，台灣美妝產品" />
		{#include file='trial-by-thousands/head.php'#}
		<script src="/js/jquery.js"></script>
		<script>
			$(function(){

				var current_index = 0,
					max_index = {#count($vote_info)-1#};
				$('#next_btn').click(function(){
					var current_vote_box = $('#vote_box_' + current_index),
						max_option_num = current_vote_box.attr('max_option_num'),
						vote_items_val = $('#vote_items_' + current_index).val();
					if (!vote_items_val) {
						alert('請選擇投票產品！');
						return false;
					}
					if (current_index == max_index) {
						$('#vote_form')[0].submit();
					} else {
						var next_index = current_index + 1;
						current_vote_box.hide();
						current_index = next_index;
						$('#vote_box_' + current_index).show();
						if (current_index == max_index) {
							$(this).find('strong').attr('class', 'comp').text('完成');
						}
						$('#prev_btn').show();
						$(window).scrollTop(0); 
					}
				});

				$('#prev_btn').click(function(){
					var	prev_index = current_index - 1;
					if (prev_index >= 0) {
						if (current_index == max_index) {
							$('#next_btn').find('strong').attr('class', 'next').text('下一步');
						}
						$('#vote_box_' + current_index).hide();
						current_index = prev_index;
						$('#vote_box_' + current_index).show();
						$(window).scrollTop(0);
					} 
					if (prev_index == 0) {
						$('#prev_btn').hide();
					}
				});

				$('label[rel=vote_label]').click(function(){
					var self = $(this),
						self_index = self.attr('index'),
						self_index_class = self.attr('class'),
						vote_items = $('#vote_items_' + self_index),
						vote_items_val = vote_items.val(),
						max_option_num = $('#vote_box_' + self_index).attr('max_option_num');
					
					//取消
					if (self_index_class == 'curr') {
						self.removeClass('curr');
					//選擇
					} else {
						if (max_option_num == 1) {
							if (vote_items_val) {
								$('label[rel=vote_label][index=' + self_index + '][class=curr]').removeClass('curr');
							}
							self.addClass('curr');
						} else if (max_option_num > 1) {
							if (vote_items_val && vote_items_val.split(',').length == max_option_num) {
								alert('最多只能選擇' + max_option_num + '項！');
								return false;
							}
							self.addClass('curr');
						}
					}
				
					var item_ids = [];
					$('label[rel=vote_label][index=' + self_index + '][class=curr]').each(function(k, v){
						item_ids.push($(this).attr('item_id'));
					});
					
					vote_items.val(item_ids.join(','));
				});

				$('label[rel=vote_label]').hover(
					function(){
						$(this).parent('li').addClass('hover')
					},
					function(){
						$(this).parent('li').removeClass('hover')
					}
				);

			});
		</script>
	</head>
	<body class="other">
		<div class="wrap">
			{#include file='trial-by-thousands/header.php'#}
			<div class="main">
				<h2 class="c_title c_title_2{#if $phase != 1#}_{#$phase#}{#/if#}">投選最想試用{#$phase_name#}</h2>
				<div class="ss_box">
					<form action="?action=vote" method="post" id="vote_form">
						<input type="hidden" name="is_submit" value="true" />
						<input type="hidden" name="phase" value="{#$phase#}" />
						{#foreach from=$vote_info key=k item=v name=vote_info#}
						<input type="hidden" id="vote_items_{#$k#}" name="post_items[{#$v.id#}]" />
						<div{#if !$smarty.foreach.vote_info.first#} style="display:none;"{#/if#} id="vote_box_{#$k#}" max_option_num="{#$v.max_option_num#}">
							<div class="hd">
								<h3 class="ss_title"><strong>{#$k+1#}</strong>{#$v.title#}</h3>
							</div>
							<div class="bd prd_list">
								<ul>
									{#foreach from=$v.item key=k2 item=v2#}
										<li>
											<div class="img_box">
												<a href="http://itrial.hk/product.php?action=detail&mtype=1&t=1&pid={#$v2.url_id#}" target="_blank"><img src="{#$v2.photo#}" /></a>
											</div>
											<label index="{#$k#}" item_id="{#$v2.id#}" rel="vote_label"><em class="i"></em> 我想試用</label>
											<h4 class="name_a">{#htmlencode($v2.brand)#}</h4>
											<h5 class="name_b">{#htmlencode($v2.title)#}</h5>
										</li>
										{#if ($k2+1)%4 == 0#}
										<li class="line"></li>
										{#/if#}
									{#/foreach#}
									<li class="line"></li>
								</ul>
							</div>
						</div>
						{#/foreach#}
					</form>
					<div class="ft">
						<a href="javascript:void(0);" class="btns fl" id="prev_btn" style="display:none;"><strong class="prev">上一步</strong></a>
						<a href="javascript:void(0);" class="btns fr" id="next_btn"><strong class="next">下一步</strong></a>
					</div>
				</div>
			</div>
		</div>
		{#include file='trial-by-thousands/footer.php'#}
	</body>
</html>